﻿@page "/Menu"

@using FluentUI.Demo.Shared.Pages.Menu.Examples

<PageTitle>@App.PageTitle("Menu")</PageTitle>

<h1>Menu</h1>

<p>As defined by the <a href="https://www.w3.org/WAI/ARIA/apg/patterns/menubar/" target="_blank" rel="noreferrer">W3C</a>:</p>
<blockquote>
    <p>
        A menu is a widget that offers a list of choices to the user, such as a set of actions or functions. Menu widgets behave like native
        operating system menus, such as the menus that pull down from the menubars commonly found at the top of many desktop application windows.
        A menu is usually opened, or made visible, by activating a menu button, choosing an item in a menu that opens a sub menu, or by invoking
        a command, such as Shift + F10 in Windows, that opens a context specific menu. When a user activates a choice in a menu, the menu usually
        closes unless the choice opened a submenu.
    </p>
</blockquote>
<p>
    While any DOM content is permissible as a child of the menu, only <code>&lt;FluentMenuItem&gt;</code>'s and slotted content with a role of
    <code>menuitem</code>, <code>menuitemcheckbox</code>, or <code>menuitemradio</code> will receive keyboard support.
</p>
<p>
    <code>&lt;FluentMenu&gt;</code> applies <code>&lt;FluentMenuItem&gt;</code>'s <code>startColumnCount</code> property based on an evaluation of all
    of the <code>&lt;FluentMenuItem&gt;</code> so the content text vertically aligns across all <code>&lt;FluentMenuItem&gt;</code>. If any
    <code>&lt;FluentMenuItem&gt;</code> does not have a roll of <code>checkbox</code> or <code>radio</code> or the <code>start</code> slot is not
    passed, <code>startColumnCount</code> is set to 0 which applies a <code>indent-0</code> class to all the <code>&lt;FluentMenuItem&gt;</code>s.
    If any <code>&lt;FluentMenuItem&gt;</code> has a roll of <code>checkbox</code> or <code>radio</code> or the <code>start</code> slot exists,
    <code>startColumnCount</code> is set to 1 which applies a <code>indent-1</code> class to all the <code>&lt;FluentMenuItem&gt</code>s. Or if any
    <code>&lt;FluentMenuItem&gt;</code> has a roll of <code>checkbox</code> or <code>radio</code> and the <code>start</code> slot exists,
    <code>startColumnCount</code> is set to 2 which applies a <code>indent-2</code> class to all the <code>&lt;FluentMenuItem&gt;</code>s.
</p>
<p>
    <code>&lt;FluentMenu&gt;</code> wraps the <code>&lt;fluent-menu&gt;</code> element, a web component implementation of a menu leveraging the
    Fluent UI design system.
</p>

<div class="demopanel" style="padding: 1rem; margin-bottom: 1rem;">
    <h5>FluentMenuProvider</h5>
    <p>
        With version 4.9.4 of the library, we introduced the <code>FluentMenuProvider</code> component. The Menu component has been updated to use this provider.
        The <code>&lt;FluentMenuProvider /&gt;</code> needs to be placed at the <b>bottom</b> of your HTML page (just like the other <b>...Providers</b> components).
        It will render all menus (and menu items) at the provider location in the HTML structure. This allows for menus to appear <b>above</b> of other components.
    </p>
    <p>
        You can disable this feature by adding the <code>UseMenuService</code> parameter (with a value of "false") to you FluentMenu component. In this case, the menu will be rendered at the location it is placed at in the page.
    </p>
</div>

<h2 id="example">Example</h2>

<DemoSection Title="Service provider" Component="@typeof(MenuServiceProviderExample)">
    <p>
        The <strong>first</strong> example contains the <code>UseMenuService="false"</code> attribute.
        The menu is created where it is declared, which can pose encapsulation problems,
        depending on the container used (in this case, a <code>FluentCard</code>).
    </p>
    <p>
        The <strong>second</strong> example uses the <code>FluentMenuProvider</code> to display the menu.
        In this case, the menu is generated at the end of the HTML page and attached to the button using the <code>Anchor</code> tag.
        <bloquote>
            It's mandatory to use a <code>Id</code> identifier on the clickable element
            and an identical <code>Anchor</code> value on the menu, to link the two elements.
        </bloquote>
    </p>
</DemoSection>

<DemoSection Title="Default" Component="@typeof(SimpleMenuExample)"></DemoSection>

<DemoSection Title="Simple context menu" Component="@typeof(ContextMenuExample)"></DemoSection>

<DemoSection Title="Default menu" Component="@typeof(MenuDefault)"></DemoSection>

<DemoSection Title="With Separator" Component="@typeof(MenuSeparator)"></DemoSection>

<DemoSection Title="With radio buttons and checkboxes" Component="@typeof(MenuCheckRadio)"></DemoSection>

<DemoSection Title="Detect when checked and unchecked (2-way binding)" Component="@typeof(MenuCheckChanged)">
    <Description>
        <p>
            The <code>CheckedChanged</code> EventCallback is invoked when the <code>FluentMenuItem</code> Role is <code>MenuItemCheckbox</code> or <code>MenuItemRadio</code>.
        </p>
    </Description>
</DemoSection>

<DemoSection Title="Nested" Component="@typeof(MenuNested)"></DemoSection>

<DemoSection Title="With icons" Component="@typeof(MenuIcon)">
    <Description>
        <p>
            When using <code>FluentIcon</code>s in a <code>FluentMenuItem</code>, you will run into issues with indentation when putting the icons in slots.
            This problem originates from the following: (from <a href="https://www.fast.design/docs/components/menu#setup" rel="nofollow">https://www.fast.design/docs/components/menu#setup</a>):
        </p>
        <blockquote>
            <p>
                <code>fast-menu</code> applies <code>fast-menu-item</code>'s <code>startColumnCount</code> property based on an evaluation
                of all of the <code>fast-menu-items</code> so the content text vertically aligns across all <code>fast-menu-items</code>.
                If any <code>fast-menu-item</code> does not have a roll of <code>checkbox</code> or <code>radio</code> or the
                <code>start</code> slot is not passed, <code>startColumnCount</code> is set to 0 which applies a <code>indent-0</code> class
                to all the <code>fast-menu-item</code>s. If any <code>fast-menu-item</code> has a roll of <code>checkbox</code> or
                <code>radio</code> or the <code>start</code> slot exists, <code>startColumnCount</code> is set to 1 which applies a
                <code>indent-1</code> class to all the <code>fast-menu-item</code>s. Or if any <code>fast-menu-item</code> has a roll of
                <code>checkbox</code> or <code>radio</code> and the <code>start</code> slot exists, <code>startColumnCount</code> is set to
                2 which applies a <code>indent-2</code> class to all the <code>fast-menu-item</code>s.
            </p>
        </blockquote>
        <p>
            Because we are rendering the web components indirectly <code>fast-menu</code> doesn't know about the icons and their slots in the
            <code>fast-menu-items</code> when it renders (they don't exist in the DOM yet) so it can't determine the <code>startColumnCount</code>.
        </p>
        <p>
            As a workaround, place the <code>FluentIcons</code> inside a <code>&lt;span slot="start"&gt;&lt;/span&gt;</code>
            (or <code>&lt;span slot="end"&gt;&lt;/span</code>&gt; in the menu items. For example:
        </p>
        <CodeSnippet>
            &lt;FluentMenu&gt;
            &lt;FluentMenuItem&gt;
            Menu item 1
            &lt;span slot="start" &gt;
            &lt;FluentIcon Icon="Icons.Regular.Size16.Globe" Slot="start" Color="Color.Neutral" /&gt;
            &lt;/span&gt;
            &lt;span slot="end"&gt;
            &lt;FluentIcon Icon="Icons.Regular.Size16.Globe" Slot="end" Color="Color.Neutral" /&gt;
            &lt;/span&gt;
            &lt;/FluentMenuItem&gt;
            :
            :
        </CodeSnippet>
        <p>
            The script gets triggered then and the icons render in the right place. You can leave the <code>Slot</code> parameter in
            the <code>FluentIcon</code> but in this case it doesn't have to be there anymore.
        </p>
    </Description>
</DemoSection>

<DemoSection Title="With standard elements" Component="@typeof(MenuStandardElements)"></DemoSection>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentMenuItem)" />

<ApiDocumentation Component="typeof(FluentMenu)" />
